<template>
    <el-table
      :data="tableData"
      border
      style="width: 90%; margin: 20px;border-radius: 8px;box-shadow: 5px 5px 10px rgba(64, 158, 255, 0.5);"
      :header-cell-style="{
          'background': '#337ecc !important',
          'color': '#ffffff',
          'border': 'none !important'
        }">
      <el-table-column prop="name" label="提成项目" ></el-table-column>  
      <el-table-column prop="target1" label="条目一" width="150" />
      <el-table-column prop="inTarget1"  label="/￥" width="100" />
      <el-table-column prop="target2" label="条目二" width="150" />
      <el-table-column prop="inTarget2" label="/￥" width="100" />
      <el-table-column prop="result" label="结算/￥" width="100" />
    </el-table>
    <div style="margin: 0px 0px 0px 25px;">总计：{{total}}￥</div>
</template>

<script setup>
import {ref, onBeforeMount, reactive,getCurrentInstance} from "vue";
import {getOneKpiList}from '@/api/empKpi'
import { ElMessage } from 'element-plus'

const props = defineProps({
  empId: {
    type: String,
    required: true, //是否规定必须得有
  },
  update: {
    type: Function,
    default: () => {},
  },
  thirdId:{
    type:Number,
    required:true
  },
  positionId: {
    type: String,
    required: true, 
  }
}) 

const Form = reactive([])
const total = ref(0);
const tableData=ref([])
onBeforeMount(()=>{
  let empId=props.empId
  let positionId=props.positionId
  getOneKpiList({positionId,empId})
    .then(data=>{
        tableData.value=data.data;
        for(let item of data.data) {
          total.value += Number(item.result);
        }
    });
})
</script>

<style>
.el-radio-group {
  margin-right: 12px;
}
.button{
        width: 200px;
        height: 40px;
        margin: 10px auto;
        float: right;
    }
</style>
